<template>
  <view class="user_container">
    <scroll-view scroll-y="true" @refresherrefresh="pullDownRefresh" class="scroll">
      <!-- 头部区域 -->
      <view class="head_container">
        <view class="pic"><image :src="userInfo.nickname ? userInfo.avatarUrl : orUserinfo.avatarUrl" mode="widthFix"></image></view>
        <view class="info">
          <view>
            {{ userInfo.nickname ? userInfo.nickname : orUserinfo.nickname }}
            <text class="iconfont icon-keaide" style="margin: 0 20rpx; font-size:60rpx"></text>
          </view>
          <view style="margin: 16rpx 0; color:#8d98a8; transform:translateX(-20rpx);font-size: 34rpx;">
            <text style="margin: 0 20rpx; ">{{ follow.length }}关注</text>
            <text style="margin: 0 20rpx;">{{ followed.length }}粉丝</text>
            <text style="margin: 0 20rpx;">Lv{{ userInfo.nickname ? userInfo.level : orUserinfo.level }}</text>
          </view>
        </view>
      </view>
      <view class="center_container"></view>
      <!-- 底部区域 -->
      <view class="footer_container"></view>
    </scroll-view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'my-userinfo',
  data() {
    return {
      follow: [],
      followed: []
    }
  },
  created() {
    if (this.userInfo.nickname) {
      // console.log(111);
      setTimeout(() => {
        this.getUserFollow(this.userInfo.userId)
        this.getUserFollowed(this.userInfo.userId)
      }, 500)
    } else {
      // console.log(222);
      setTimeout(() => {
        this.getUserFollow(this.orUserinfo.userId)
        this.getUserFollowed(this.orUserinfo.userId)
      }, 500)
    }
  },
  computed: {
    ...mapState('login', ['userInfo', 'orUserinfo'])
  },
  // created() {
  //   console.log(this.orUserinfo)
  // },
  methods: {
    async getUserFollow(id) {
      const { data: res } = await uni.$http.get('user/follows', { uid: id })
      if (res.code !== 200) return uni.$showMsg('关注列表获取失败')
      this.follow = res.follow
      // console.log(res)
    },
    async getUserFollowed(id) {
      const { data: res } = await uni.$http.get('user/followeds', { uid: id })
      if (res.code !== 200) return uni.$showMsg('关注列表获取失败')
      this.followed = res.followeds
      // console.log(res)
    },
    pullDownRefresh(){
      console.log(222);
    }
  }
}
</script>

<style lang="scss" scoped>
.user_container {
  background: linear-gradient(45deg, pink, skyblue);
  background-color: #edece8;
  height: 100vh;
  background-size: 100% 100%;
}
.scroll{
  height: 100vh;
}
.pic {
  height: 300rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(114rpx);
  background-color: #ffffff;
}
image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  box-shadow: 0 2rpx 20rpx pink;
  transform: translateY(-130rpx);
}
.info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: translate(0rpx, -70rpx);
}
</style>
